<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <hr/>
  <StudySetup msg="这是一条消息" @hello="hello"></StudySetup>
  <hr/>
  <button @click="onClick">创建/销毁 生命周期组件</button>
  <StudyLifecycle v-if="show"/>
  <hr/>
  <button @click="onClick2">创建/销毁 鼠标定位组件</button>
  <StudyHook v-if="show2"/>
  <hr/>
  <StudytoRef/>
  <hr/>
  <StudyShallow/>
  <hr/>
  <StudyReadonly/>
  <hr/>
  <StudyToRaw/>
  <hr/>
  <StudyCustomRef/>
  <hr/>
  <StudytTeleport/>
  <hr/>
  <Suspense>
    <template #default>
      <StudytSuspense/>
    </template>
    <template #fallback>
      <h3>加载中...请稍后...</h3>
    </template>
  </Suspense>
  <div style="margin-bottom: 20%;"></div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// 学习setup
import StudySetup from './components/Study_setup.vue';
// 学习生命周期
import StudyLifecycle from './components/Study_lifecycle.vue';
//学习hook
import StudyHook from './components/Study_hook.vue'
//学习toRef
import StudytoRef from './components/Study_toRef.vue'
//学习shallowRef, shallowReactive
import StudyShallow from './components/Study_shallow.vue';
//学习readonly
import StudyReadonly from './components/Study_readonly.vue';
//学习toRaw
import StudyToRaw from './components/Study_toRaw.vue';
//学习customRef
import StudyCustomRef from './components/Study_customRef.vue';
//学习teleport
import StudytTeleport from './components/Study_teleport.vue';

//学习Suspense
// import StudytSuspense from './components/Study_suspense.vue';//静态引入
import { defineAsyncComponent } from 'vue'
const StudytSuspense = defineAsyncComponent(() => import('./components/Study_suspense.vue'))

import { ref } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    StudySetup,
    StudyLifecycle,
    StudyHook,
    StudytoRef,
    StudyShallow,
    StudyReadonly,
    StudyToRaw,
    StudyCustomRef,
    StudytTeleport,
    StudytSuspense
  },
  setup() {
    function hello() {
      alert('hello')
    }

    let show = ref(false)
    let show2 = ref(false)

    function onClick() {
      show.value = !show.value
      console.log(`------生命周期组件即将 ${show.value ? '创建' : '销毁'}------`)
    }

    function onClick2() {
      show2.value = !show2.value
      console.log(`------鼠标定位组件即将 ${show2.value ? '创建' : '销毁'}------`)
    }
    
    return{
      hello,
      show,
      show2,
      onClick,
      onClick2
    }
  }
}
</script>
